<template>
  <div class="waterMap">
    <!-- <el-button @click="screenshot">一张图</el-button> -->
    <!-- <CesiumContainer></CesiumContainer> -->
    <iframe @load="onloadziframe" id="mapIframe" src="/mapIframe/vt-map/#/vt-theme" style="height: 100%; width: 100%"></iframe>
    <panel ref="panelRef" :title="panelName" @changeMap="switchBaseLayer">
      <component :is="pageName" :panelDetail="panelDetail" :panelName="panelName"></component>
    </panel>
    <intelligentAssistant @panelData="getLeftPanelData" currentPage="map"></intelligentAssistant>
    <!-- <parentDialog title="专题图预览" :visible.sync="dialogVisible" v-if="dialogVisible" width="80%" height="80%">
      <img :src="imageUrl" alt="" width="100%" height="100%" />
    </parentDialog> -->
  </div>
</template>

<script>
import CesiumContainer from "@/components/cesium/CesiumContainer.vue";
import panel from "@/components/panel/index.vue";
import baseInfo from "./baseInfo.vue";
import basinInfo from "./basinInfo.vue";
import RRdetal from "./RRdetal.vue";
import intelligentAssistant from "@/components/intelligentAssistant/chatWindow.vue";
import { delay, downloadBase64Image } from "@/utils/index";
import parentDialog from "@/components/dialog/parentDialog.vue"; // 弹窗
var iframe = null;
export default {
  components: { CesiumContainer, panel, baseInfo, basinInfo, RRdetal, intelligentAssistant, parentDialog },
  data() {
    return {
      pageName: "baseInfo",
      panelDetail: null,
      currentFilter: {
        elementType: null,
        filterOptions: null,
      },
      filterMap: new Map(),
      panelName: "基础信息",
      dialogVisible: false,
      imageUrl: "",
    };
  },
  mounted() {},
  methods: {
    // 问答数据
    async getLeftPanelData(data) {
      try {
        // 获取筛选条件
        this.getFilterOptions();
        await delay(500);
        console.log(data.jsonResult);
        console.log(JSON.parse(data.jsonResult));
        this.panelDetail = JSON.parse(data.jsonResult);
        let dataList = this.panelDetail?.data || [];
        if (data.type == "详情") {
          this.pageName = "RRdetal"; // 需要显示的面板
          this.$refs.panelRef.isOpen = dataList.length < 1; // 面板是否显示
          this.panelName = dataList[0].value; // 面板名称
          let layerName = dataList.find(v => v.index == 1).title.split("名称")[0];
          if (layerName == "河流") {
            this.showCJ(dataList[0].value); // 调用显示图层
          } else if (layerName == "水库") {
            this.showXLD(dataList[0].value); // 调用显示图层
          }
        } else if (data.type == "列表") {
          this.pageName = "basinInfo";
          this.$refs.panelRef.isOpen = dataList.data.length < 1;
          if (dataList.length) {
            this.panelName = dataList[0].pn_typecn;
          }
        } else if (data.type == "下载") {
          console.log(data.jsonResult);
          console.log(JSON.parse(data.jsonResult));
          if (data.jsonResult) {
            this.screenshot(JSON.parse(data.jsonResult));
          }
        } else {
          console.log(JSON.parse(data.jsonResult));
          // debugger;
          let filter = JSON.parse(data.jsonResult);
          if (filter.elementType == "river") this.showCJ(filter);
          else if (filter.elementType == "rswb_dam") this.showXLD(filter);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 监听iframe加载完成事件
    onloadziframe() {
      iframe = document.getElementById("mapIframe");
      setTimeout(async () => {
        this.loadRiver();
        this.fullExtent();
        window.addEventListener("message", event => {
          let data = event.data;
          const type = data.type;
          if (type == "screenshot") {
            // this.imageUrl = data.data;
            // this.dialogVisible = true;
            // 返回专题图
            downloadBase64Image(data.data, "水利一张图.png");
          }
          if (!event.data?.data?.filterOptions) return;
          // 图层筛选
          this.filterMap.set(data.data.elementType, {
            elementType: data.data.elementType,
            filterOptions: data.data.filterOptions,
          });
          // console.log(event);
          // this.callbackFun[type](event);
          // this.currentFilter.elementType = event.data.data.elementType;
          // this.currentFilter.filterOptions = event.data.data.filterOptions;
        });
      }, 50);
    },
    // 初始化视角
    fullExtent() {
      iframe.contentWindow.postMessage(
        {
          type: "fullExtent",
          data: {},
        },
        "*"
      );
    },
    // 加载河流图层
    loadRiver() {
      // 河流
      iframe.contentWindow.postMessage(
        {
          type: "addLayer",
          data: {
            elementType: "river",
          },
        },
        "*"
      );
      // 水库
      iframe.contentWindow.postMessage(
        {
          type: "addLayer",
          data: {
            elementType: "rswb_dam",
          },
        },
        "*"
      );
    },
    // 查询河流
    showCJ(data) {
      let currentFilter = {};
      if (typeof data == "string") {
        currentFilter = this.filterMap.get("river");
        currentFilter.filterOptions.forEach(filterOption => {
          filterOption.filters.forEach(filter => {
            if (filter.filterValue === "obj_name") {
              filter.value = riverName;
            }
          });
        });
      } else currentFilter = data;

      iframe.contentWindow.postMessage(
        {
          type: "filters",
          data: currentFilter,
        },
        "*"
      );
    },
    // 查询水库
    showXLD(data) {
      console.log(this.filterMap, "filterMapfilterMapfilterMapfilterMapfilterMap");
      let currentFilter = {};
      if (typeof data == "string") {
        currentFilter = this.filterMap.get("rswb_dam");
        currentFilter.filterOptions.forEach(filterOption => {
          filterOption.filters.forEach(filter => {
            if (filter.filterValue === "res_code" || filter.filterValue === "dam_code") {
              // 水库名字和大坝名字不一定一致，编码应该一致，所以最好使用编码
              filter.value = data;
            }
          });
        });
      } else currentFilter = data;

      iframe.contentWindow.postMessage(
        {
          type: "filters",
          data: currentFilter,
        },
        "*"
      );
    },
    // 切换底图
    switchBaseLayer(name) {
      iframe.contentWindow.postMessage(
        {
          type: "switchBaseLayer",
          data: {
            // 切换底图， 2023水利遥感影像：ygyx2023； 水利地形图: COPchina30mDEM
            layer: name,
          },
        },
        "*"
      );
    },
    // 生成一张图
    screenshot(param) {
      this.getFilterOptions();
      // iframe.contentWindow.postMessage(
      //   param
      //   //   {
      //   //   type: "screenshot",
      //   //   data: {
      //   //     isContainerBase: true, // 是否包含底图
      //   //   },
      //   // }
      // );
    },
    // 获取筛选条件
    getFilterOptions() {
      // 河流
      iframe.contentWindow.postMessage(
        {
          type: "getFilterOptions",
          data: {
            elementType: "river",
          },
        },
        "*"
      );
      // 水库大坝
      iframe.contentWindow.postMessage(
        {
          type: "getFilterOptions",
          data: {
            elementType: "rswb_dam",
          },
        },
        "*"
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.waterMap {
  width: 100%;
  height: 100%;
}
</style>
